<template>
	<view class="list">
		<!-- 就诊人 -->
		<view class="outpatient">
			<view class="outpatient_box">
				<text class="font17 font-323232 font-b">何承阳</text>
				<view @click="Onmedical">切换就诊人</view>
			</view>
			<view class="outpatient_card font14 font-7d766b">就诊卡:HA2121231</view>
		</view>
		<!-- 数据 -->
		<view class="list_data">
			<view class="report_list" v-for="(item,index) in listData" :key="index" @click="Onpage(item)">
				<view class="report_box">
					<view class="font14 font-7d766b">{{item.name}}</view>
					<view :class="item.type=='a'?'font-6ccbb6':'font-ef9140'" class="font15">{{item.type=='a'?'检验':'检查'}}</view>
				</view>
				<view class="font14 font-323232 report_bottom20">{{item.title}}</view>
				<view class="report_box font-323232 font13">
					<view>{{item.time}}</view>
					<view class="font-646464">查看详情</view>
				</view>
			</view>
		</view>
		<!-- 就诊人弹窗 -->
		<uni-popup ref="popup" type="bottom">
			<view class="ComPopup_bos">
				<view class="popup_title">
					<view class="popup_time font15 font-323232 font-b">切换接诊人</view>
					<image @click="Onclose" class="popup_img" src="@/static/close.png"></image>
				</view>
				<view class="outpatient_pbos">
					<!-- 开始循环 -->
					<view class="outpatient_Popup">
						<view class="outpatient_Popupbox">
							<text class="font17 font-323232 font-b">何承阳</text>
							<image class="outpatient_image" src="/static/my/mor_b.png"></image>
						</view>
						<view class="outpatient_card font14 font-7d766b">就诊卡:HA2121231</view>
					</view>
					<view class="outpatient_Popup">
						<view class="outpatient_Popupbox">
							<text class="font17 font-323232 font-b">何承阳</text>
							<!-- <image class="outpatient_image" src="/static/my/mor_b.png"></image> -->
						</view>
						<view class="outpatient_card font14 font-7d766b">就诊卡:HA2121231</view>
					</view>
				</view>
				<!-- 按钮 -->
				<view class="ComPopup_button">
					<view>添加就诊人</view>
					<view>就诊人管理</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				//数据
				listData: [{
						name: '武汉市中心医院',
						title: '血液检查-血常规',
						time: '2020-10-1',
						type: 'a'
					},
					{
						name: '武汉市中心医院',
						title: 'CR-全胸CT',
						time: '2020-11-14',
						type: 'b'
					},
					{
						name: '武汉市中心医院',
						title: '血液检查-血常规',
						time: '2020-10-1',
						type: 'a'
					},
					{
						name: '武汉市中心医院',
						title: 'CR-全胸CT',
						time: '2020-11-14',
						type: 'b'
					},
				]
			}
		},
		methods: {
			//切换接诊人弹窗
			Onmedical() {
				this.$refs.popup.open()
			},
			//关闭弹窗
			Onclose() {
				this.$refs.popup.close()
			},
			//跳转页面
			Onpage(res) {
				if (res.type == 'a') {
					wx.navigateTo({
						url: '/pagesA/home/lookorder/testpage',
					})
				}
				if (res.type == 'b') {
					wx.navigateTo({
						url: '/pagesA/home/lookorder/inspect',
					})
				}
			}
		}
	}
</script>

<style>
	/* 就诊人 */
	.outpatient {
		width: 750rpx;
		padding: 36rpx 30rpx;
		background-color: #ffffff;
		box-shadow: 0px 0px 50rpx 0px rgba(213, 213, 213, 0.3);

	}

	.outpatient_box {
		display: flex;
		width: 690rpx;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.outpatient_box view {
		height: 52rpx;
		width: 168rpx;
		border-radius: 30rpx;
		border: 1rpx #9ddcce solid;
		color: #9ddcce;
		font-size: 22rpx;
		line-height: 52rpx;
		text-align: center;
	}

	/* 数据 */
	.list_data {
		background-color: #f8f8f8;
		padding-bottom: 30rpx;
	}

	.report_list {
		padding: 0 30rpx;
		background-color: #fff;
		margin-top: 30rpx;
	}

	.report_bottom20 {
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eeeeee;
	}

	.report_box {
		display: flex;
		height: 80rpx;
		justify-content: space-between;
		align-items: center;
	}

	/* 弹窗 */
	.ComPopup_bos {
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0 0;
	}

	.popup_title {
		position: relative;
		width: 750rpx;
		height: 106rpx;
	}

	.popup_time {
		width: 750rpx;
		text-align: center;
		height: 106rpx;
		line-height: 106rpx;
	}

	.popup_img {
		height: 36rpx;
		width: 36rpx;
		position: absolute;
		top: 35rpx;
		right: 20rpx;
	}

	.outpatient_pbos {
		padding-top: 10rpx;
	}

	.outpatient_Popup {
		width: 750rpx;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx #eeeeee solid;
	}

	.outpatient_Popupbox {
		display: flex;
		width: 690rpx;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.outpatient_image {
		height: 30rpx;
		width: 30rpx;
	}

	.ComPopup_button {
		display: flex;
		width: 750rpx;
		height: 100rpx;
		color: #6ccbb6;
		font-size: 30rpx;
	}

	.ComPopup_button view:nth-of-type(1) {
		background-color: #6ccbb6;
		color: #ffffff;
	}


	.ComPopup_button view:nth-of-type(2) {
		background-color: #ffffff;
		color: #6ccbb6;
	}

	.ComPopup_button view {
		width: 50%;
		text-align: center;
		line-height: 100rpx;
	}
</style>
